<template>
    <div>
        <el-dialog
                :visible.sync="dataPreviewVisible.v"
                :title="title"
                v-dialogDrag>
            <div style="padding: 20px 0px 20px 0">
                <el-radio-group v-model="radio" size="mini">
                    <el-radio-button label="字段"></el-radio-button>
                    <el-radio-button label="数据"></el-radio-button>
                </el-radio-group>
            </div>
            <dataInfoTable :tableData="dataInfoData" v-show="dataInfoTableShow"></dataInfoTable>
            <dataTable :tableInData="dataTableData" v-show="dataTableShow"></dataTable>
        </el-dialog>
    </div>
</template>

<script>
    import dataInfoTable from '../../components/table/dataInfoTable';
    import dataTable from '../../components/table/dataTable'

    export default {
        name: "",
        data() {
            return {
                dataInfoTableShow: true,
                dataTableShow: false,
                radio: '字段',
                dataPreviewVisible: Object,
                artifactId: String,
                title: '',
                dataInfoData: [],
                dataTableData: [],
                totalData: [],
                personal: false,
                cardData:{}
            }
        },
        props: {},
        components: {
            "dataInfoTable": dataInfoTable,
            "dataTable": dataTable
        },
        methods: {
            showData(dataType) {
                let that = this;
                if (dataType === '字段') {
                    if (this.personal) {
                        that.$axios.get('/user/data/field/' + this.cardData.id).then(function (res) {
                            that.dataInfoData = res.body;
                        }).catch(function (error) {
                            console.log(error)
                        });
                    } else {
                        that.$axios.get('/data/field/' + this.cardData.pk_meta_id).then(function (res) {
                            that.dataInfoData = res.body;
                        }).catch(function (error) {
                            console.log(error)
                        });
                    }
                    that.dataTableShow = false;
                    that.dataInfoTableShow = true;
                } else if (dataType == '数据') {
                    if (this.personal) {
                        that.$axios.get('/user/data/preview/' + this.cardData.id + '?offset=0&size=100').then(function (res) {
                            that.dataTableData = res.body;
                        }).catch(function (error) {
                            console.log(error)
                        });
                    } else {
                        that.$axios.get('/data/preview/' + this.cardData.pk_meta_id + '?offset=0&size=100').then(function (res) {
                            that.dataTableData = res.body;
                        }).catch(function (error) {
                            console.log(error)
                        });
                    }
                    that.dataInfoTableShow = false;
                    that.dataTableShow = true;
                }
            },
        },
        mounted() {
            let that = this;
            this.$Bus.$on('dataDialogParams', (previewVisible, cardData) => {
                this.dataPreviewVisible = previewVisible;
                this.cardData = cardData;
                this.personal = !!cardData.userId;
                this.title = this.personal ? cardData.name : cardData.meta_name;
                that.showData(that.radio);
            });

        },
        watch: {
            radio: function () {
                this.showData(this.radio)
            }
        }
    }
</script>

<style scoped>

</style>